.tabOptionsGrid {
  display: grid;
}

.tabOptionsGrid > * {
  padding-top: calc(var(--spacer-px) * 1);
  padding-bottom: calc(var(--spacer-px) * 1);
  padding-right: calc(var(--spacer-px) * 3);
  padding-left: calc(var(--spacer-px) * 6);
}

.tabOptionsGrid > * + * {
  border-top: 1px solid var(--color-lineColor);
}

.withLowerChild {
  display: grid;
  gap: calc(var(--spacer-px) * 4);
}

.largeLink {
  font-size: 24px;
  font-weight: 700;
  background-color: hsla(var(--color-brandHsl), 0.1);
  padding: calc(var(--spacer-px) * 6) calc(var(--spacer-px) * 4);
  color: hsla(var(--color-brandHsl), 1);
  text-align: center;
  margin-inline: calc(var(--spacer-px) * 8);
  border-radius: 8px;
  border: 1px solid hsla(var(--color-brandHsl), 0.2);
}

.largeLink:hover {
  background-color: hsla(var(--color-brandHsl), 0.2);
}

.selectTrigger {
  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--spacer-px) * 2);
  align-items: center;
  border-radius: 3px;
  padding: calc(var(--spacer-px) * 2);
  color: var(--color-darkGrey);
}

.selectTrigger:hover,
.selectTrigger:focus-visible {
  background-color: var(--color-lineColor);
  color: var(--color-foreground);
}

.selectTrigger:focus {
  box-shadow: none;
}

.selectContent {
  width: 200px;
  max-height: 200px;
  overflow: auto;
  background-color: var(--color-background);
  border: 1px solid var(--color-uiAccent);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  border-radius: 3px;
  z-index: 400;
  position: relative;
}

.selectContent [role="option"] {
  padding: calc(var(--spacer-px) * 2);
  /* prevent selection */
  user-select: none;
}

.selectContent [role="option"]:hover {
  background-color: var(--color-lineColor);
}

.rangeRoot {
  position: relative;
  width: 100%;
  max-width: 400px;
  --height: 22px;
  --border-width: 1px;
  height: var(--height);
  display: block;
  background-color: var(--color-lineColor);
  border: var(--border-width) solid var(--color-uiAccent);
  border-radius: 3px;
  overflow: hidden;
}

.rangeRange {
  position: absolute;
  height: 100%;
  background-color: var(--color-uiAccent);
}

.rangeThumb {
  width: calc(var(--height) - 2 * var(--border-width));
  height: calc(var(--height) - 2 * var(--border-width));
  background-color: var(--color-uiAccent);
  display: block;
}

.rangeThumb:hover {
  background-color: var(--color-edgeHover);
}

.rangeThumb:focus-visible {
  background-color: var(--color-lineNumbers);
  outline: none;
}
